<template>
	<cu-custom :isBack="true">
		<template #title>任务一览</template>
	</cu-custom>
	
	<scroll-view scroll-x class="bg-white nav text-center" style="width:100%;position: fixed;z-index: 11;">
		<view class="cu-bar bg-white search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input
					:enable-native="false"
					type="text"
					v-model="searchValue"
					placeholder="输入关键词搜索"
					confirm-type="search"
					@confirm="handleSearch"
					@blur="handleSearch"
					@input="inputChange"
				/>
			</view>
		</view>
		<view class="flex">
			<view
				class="cu-item flex-sub"
				:class="item.value === TabCur? 'text-blue cur' : ''"
				v-for="item in tabNav"
				:key="item.value"
				@tap="tabSelect"
				:data-id="item.value"
			>
				{{ item.label }}
			</view>
		</view>
	</scroll-view>
	
	<view class="page-content">
		
		<view v-if="dataList.length > 0" v-for="(item, index) in dataList" :key="index">
			<Mission 
				:id="item.id"
				:title="item.title"
				:content="item.describe"
				:date="item.startTime"
				:status="item.status"
			/>
		</view>
		
		<view v-else class="empty">
			<image src="../../static/images/empty-message.png" mode="aspectFit"></image>
		</view>
		
	</view>
	
	<view class="cu-load text-gray" :class="status === 'loading' ? 'loading' : 'over'"></view>
	
	<ListView ref="listview" />
	
</template>

<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app"
import { onMounted, reactive, ref, type Ref } from 'vue';
import { onReachBottom } from "@dcloudio/uni-app";
import Mission from "./components/Mission.vue"
import { getMission, getMissionList } from "@/api/mission.js"
import ListView from "@/components/ListView.vue"

interface IMission {
	title: string
	content: string
	date: string
}
const mockData:Ref<any[]> = ref([
	{
		title: "靶向督导任务",
		content: "宁波市实验学校",
		date: "10-28"
	},
	{
		title: "靶向督导任务",
		content: "宁波市第四中学",
		date: "10-28"
	}
])
const tabNav:Ref<any[]>= ref([
	{
		value: 0,
		label: "全部"
	},
	{
		value: 1, // 2 - 4
		label: "常规督导"
	},
	{
		value: 2,
		label: "专项任务"
	},
	{
		value: 3,
		label: "靶向督导"
	}
])

const TabCur:Ref<number> = ref(0)
const tabSelect = (e:any):void => {
	TabCur.value = e.currentTarget.dataset.id
	loadData("refresh")
}

const searchValue:Ref<string> = ref("")
let searchable = false
const inputChange = ():void => {
		searchable = true
}
const handleSearch = ():void => {
	if (!searchable) return
	searchable = false
	loadData("refresh")
}

const status:Ref<string> = ref("loadmore")
let currPage:number = 1
const dataList:Ref<any[]> = ref([])
const loadData = (type:string = 'default', insen = false):void => {
	if (type === "refresh") {
		currPage = 1
		status.value = "loadmore"
		// 无感刷新
		!insen ? dataList.value = [] : ""
	}
	if (status.value === 'loading' || status.value === 'over') return
	status.value = "loading"
	getMissionList({
		pageNum: currPage++,
		pageSize: 10,
		status: "2,4,5",
		// statusArr: [2, 4, 5],
		type: TabCur.value,
		searchValue: searchValue.value
	}).then((res:any) => {
		const rows = res.rows
		if (type === "refresh") {
			dataList.value = [...res.rows]
		} else {
			dataList.value.push(...res.rows)
		}
		status.value = rows.length < 10 ? "over" : "loadmore"
	})
}

const listview = ref()

onReachBottom(() => {
	loadData()
})
onShow(() => {
	loadData("refresh", true)
})

</script>

<style lang="stylus" scoped>
body
	min-height: 100vh
	background-color: #FFFFFF
.page-content
	padding-top 220rpx
	.empty
		width: 100%
		text-align: center
		image
			width: 100%
// .cu-item
// 	margin: 0 40rpx
</style>
